<script setup lang="ts">
defineProps<{
  label: string
  iconName: string
  content: string
}>();
</script>

<template>
  <div class="blocks half-block">
    <RouterLink
      :to="`/series-${label.toLowerCase()}`"
      class="group/base block mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"
    >
      <div class="flex items-center space-x-3">
        <UIcon
          :name="iconName"
          dynamic
          class="text-cyan-500 group-hover/base:text-white"
        />
        <p
          class="text-slate-900 text-lg group-hover/base:text-white font-semibold"
        >
          {{ label }} 初级课程
        </p>
      </div>
      <p class="text-slate-500 group-hover/base:text-white text-sm">
        {{ content }}
      </p>
    </RouterLink>
  </div>
</template>

<style scoped lang="postcss">
.blocks {
  /* 完美的50% | 16px === 8px*2 */
  @apply bg-cyan-100 p-[10px] border-solid border-2 border-blue-300 rounded-lg flex flex-col;
}

.half-block {
  @apply basis-[calc(50%-16px)] m-2;
}

.expand {
  @apply transition duration-300 ease-in-out transform group-hover:scale-110;
}
</style>
